/**
 * @description: 常用变量
 * @Date: 2022-02-21 19:58:13
 */

/* Transition
------------------------------------------------------------------------------ */
$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--fade-linear-transition: opacity 200ms linear !default;
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$--background-color-transition-base: background-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$--fade-linear-transition-fast: opacity 50ms linear !default;

/* Color
------------------------------------------------------------------------------ */
$--color-white: #ffffff !default;
$--color-black: #000000 !default;

// $--color-primary: #2d8cf0 !default;
$--color-primary: #2879fe !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* #4197F1 */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* #57A3F3 */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* #6BAEF4 */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* #81BAF6 */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* #95C5F7 */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* #ABD1F9 */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* #BFDCFB */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* #D5E8FC */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* #E9F3FE */

$--color-success: #33cc66 !default;
$--color-success-light: mix($--color-white, $--color-success, 80%) !default;
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default;

$--color-warning: #ffcc00 !default;
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default;
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default;

$--color-danger: #eb5757 !default;
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default;
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default;

$--color-info: #909399 !default;
$--color-info-light: mix($--color-white, $--color-info, 80%) !default;
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default;

$--color-text-primary: #303133 !default;
$--color-text-regular: #606266 !default;
$--color-text-secondary: #909399 !default;
$--color-text-placeholder: #c0c4cc !default;

$--border-color-base: #dcdfe6 !default;
$--border-color-light: #e4e7ed !default;
$--border-color-lighter: #ebeef5 !default;
$--border-color-extra-light: #f2f6fc !default;

$--background-color-base: #f4f6f8 !default;

/* Border
------------------------------------------------------------------------------ */
$--border-width-base: 1px !default;
$--border-style-base: solid !default;
$--border-color-hover: $--color-text-placeholder !default;
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default;

$--border-radius-base: 4px !default;
$--border-radius-small: 2px !default;
$--border-radius-round: 40px !default;
$--border-radius-circle: 100% !default;
$--border-radius-zero: 0 !default;

/* Box-shadow
------------------------------------------------------------------------------ */
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04) !default;
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !default;
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;

/* Typography
------------------------------------------------------------------------------ */
$--font-path: 'fonts' !default;
$--font-display: 'auto' !default;

$--font-size-extra-large: 20px !default;
$--font-size-large: 18px !default;
$--font-size-medium: 16px !default;
$--font-size-base: 14px !default;
$--font-size-small: 13px !default;
$--font-size-extra-small: 12px !default;

$--font-weight-primary: 500 !default;
$--font-weight-secondary: 100 !default;

$--font-line-height-primary: 24px !default;
$--font-line-height-secondary: 16px !default;

$--font-color-disabled-base: #bbb !default;

/* z-index
------------------------------------------------------------------------------ */
$--index-normal: 1 !default;
$--index-center: 100 !default;
$--index-top: 1000 !default;
$--index-popper: 2021 !default;

/* Disable base
------------------------------------------------------------------------------ */
$--disabled-fill-base: $--background-color-base !default;
$--disabled-color-base: $--color-text-placeholder !default;
$--disabled-border-base: $--border-color-light !default;

/* padding
------------------------------------------------------------------------------ */
$--padding-extra-large: 32px !default;
$--padding-large: 24px !default;
$--padding-medium: 16px !default;
$--padding-base: 12px !default;
$--padding-small: 8px !default;
$--padding-extra-small: 4px !default;

/* Button
------------------------------------------------------------------------------ */
$--button-font-size: $--font-size-base !default;
$--button-font-weight: $--font-weight-primary !default;
$--button-border-radius: $--border-radius-base !default;
$--button-padding-vertical: 12px !default;
$--button-padding-horizontal: 20px !default;

$--button-medium-font-size: $--font-size-base !default;
$--button-medium-border-radius: $--border-radius-base !default;
$--button-medium-padding-vertical: 10px !default;
$--button-medium-padding-horizontal: 20px !default;

$--button-small-font-size: 12px !default;
$--button-small-border-radius: #{$--border-radius-base - 1} !default;
$--button-small-padding-vertical: 9px !default;
$--button-small-padding-horizontal: 15px !default;

$--button-mini-font-size: 12px !default;
$--button-mini-border-radius: #{$--border-radius-base - 1} !default;
$--button-mini-padding-vertical: 7px !default;
$--button-mini-padding-horizontal: 15px !default;

$--button-hover-tint-percent: 20% !default;
$--button-active-shade-percent: 10% !default;

/* Link
------------------------------------------------------------------------------ */
$--link-font-size: $--font-size-base !default;
$--link-font-weight: $--font-weight-primary !default;

$--link-default-font-color: $--color-text-regular !default;
$--link-default-active-color: $--color-primary !default;
$--link-disabled-font-color: $--color-text-placeholder !default;
$--link-primary-font-color: $--color-primary !default;
$--link-success-font-color: $--color-success !default;
$--link-warning-font-color: $--color-warning !default;
$--link-danger-font-color: $--color-danger !default;
$--link-info-font-color: $--color-info !default;

/* Radio
------------------------------------------------------------------------------ */
$--radio-size-default: 14px !default;

$--radio-disabled-border-color: $--border-color-base !default;
$--radio-disabled-input-fill: $--border-color-extra-light !default;
$--radio-disabled-icon-color: $--color-text-placeholder !default;

/* Checkbox
------------------------------------------------------------------------------ */
$--checkbox-size-default: 14px !default;

$--checkbox-disabled-border-color: $--border-color-base !default;
$--checkbox-disabled-input-fill: $--border-color-extra-light !default;
$--checkbox-disabled-icon-color: $--color-text-placeholder !default;

/* Input
------------------------------------------------------------------------------ */
$--input-height: 40px !default;
$--input-font-size: $--font-size-base !default;
$--input-font-color: $--color-text-regular !default;

$--input-border: $--border-base !default;
$--input-border-radius: $--border-radius-base !default;

$--input-background-color: $--color-white !default;
$--input-placeholder-color: $--color-text-placeholder !default;

$--input-border-color-hover: $--border-color-hover !default;

$--input-focus-border: $--color-primary !default;

$--input-disabled-fill: $--disabled-fill-base !default;
$--input-disabled-border: $--disabled-border-base !default;
$--input-disabled-color: $--disabled-color-base !default;
$--input-disabled-placeholder-color: $--color-text-placeholder !default;

$--input-icon-size: 40px !default;
$--input-icon-font-size: 16px !default;
$--input-icon-color: $--color-text-placeholder !default;
$--input-clear-hover-color: $--color-text-secondary !default;

$--input-medium-font-size: 14px !default;
$--input-medium-height: 36px !default;

$--input-small-font-size: 13px !default;
$--input-small-height: 32px !default;

$--input-mini-font-size: 12px !default;
$--input-mini-height: 28px !default;

/* textarea
------------------------------------------------------------------------------ */
$--textarea-padding-vertical: 5px !default;
$--textarea-padding-horizontal: 15px !default;
$--textarea-padding-default: $--textarea-padding-vertical $--textarea-padding-horizontal;

/* switch
------------------------------------------------------------------------------ */
$--switch-height: 20px !default;
$--switch-width: 40px !default;
$--switch-core-size: 16px !default;
$--switch-border-radius: 10px !default;

$--switch-inactive-background-color: $--border-color-base !default;
$--switch-inactive-border-color: $--border-color-base !default;
$--switch-inactive-disabled-background-color: mix($--color-white, $--border-color-base, 50%) !default;
$--switch-inactive-disabled-border-color: mix($--color-white, $--border-color-base, 50%) !default;

$--switch-active-border-color: $--color-primary !default;
$--switch-active-background-color: $--color-primary !default;
$--switch-active-disabled-border-color: mix($--color-white, $--color-primary, 50%) !default;
$--switch-active-disabled-background-color: mix($--color-white, $--color-primary, 50%) !default;

$--switch-active-success-border-color: $--color-success !default;
$--switch-active-success-background-color: $--color-success !default;
$--switch-active-disabled-success-border-color: mix($--color-white, $--color-success, 50%) !default;
$--switch-active-disabled-success-background-color: mix($--color-white, $--color-success, 50%) !default;

$--switch-active-warning-border-color: $--color-warning !default;
$--switch-active-warning-background-color: $--color-warning !default;
$--switch-active-disabled-warning-border-color: mix($--color-white, $--color-warning, 50%) !default;
$--switch-active-disabled-warning-background-color: mix($--color-white, $--color-warning, 50%) !default;

$--switch-active-danger-border-color: $--color-danger !default;
$--switch-active-danger-background-color: $--color-danger !default;
$--switch-active-disabled-danger-border-color: mix($--color-white, $--color-danger, 50%) !default;
$--switch-active-disabled-danger-background-color: mix($--color-white, $--color-danger, 50%) !default;

$--switch-active-info-border-color: $--color-info !default;
$--switch-active-info-background-color: $--color-info !default;
$--switch-active-disabled-info-border-color: mix($--color-white, $--color-info, 50%) !default;
$--switch-active-disabled-info-background-color: mix($--color-white, $--color-info, 50%) !default;

/* Popper
------------------------------------------------------------------------------ */
$--popper-margin: 10px !default;
$--popper-padding: 20px !default;
$--popper-line-height: 36px !default;
$--popper-font-size: 14px !default;

$--popper-title-line-height: 30px !default;
$--popper-title-font-size: 12px !default;
$--popper-title-color: $--color-text-secondary !default;

$--popper-medium-margin: 6px !default;
$--popper-medium-padding: 17px !default;
$--popper-medium-line-height: 30px !default;
$--popper-medium-font-size: 14px !default;

$--popper-small-margin: 6px !default;
$--popper-small-padding: 15px !default;
$--popper-small-line-height: 27px !default;
$--popper-small-font-size: 13px !default;

$--popper-mini-margin: 3px !default;
$--popper-mini-padding: 10px !default;
$--popper-mini-line-height: 24px !default;
$--popper-mini-font-size: 12px !default;

/* table
------------------------------------------------------------------------------ */
$--table-stripe-background-color: #fafafa !default;
$--table-hover-background-color: #f5f7fa !default;

/* message
------------------------------------------------------------------------------ */
$--message-padding-default: 15px 15px 15px 20px !default;
$--message-transition-default: opacity 0.3s, transform 0.4s, top 0.4s !default;
$--message-top-default: 20px !default;
$--message-min-width-default: 280px !default;

/* layout
------------------------------------------------------------------------------ */
$--layout-container-padding-default: 12px !default;
// $--layout-row-gutter-x-default: 24px !default;
// $--layout-row-gutter-y-default: 0 !default;

/* images
------------------------------------------------------------------------------ */
$--images-size-default: 100px !default;
$--images-size-medium: 64px !default;
$--images-size-small: 40px !default;
$--images-icon-size-default: 30px;
$--images-icon-size-medium: 24px;
$--images-icon-size-small: 18px;
$--images-text-color-default: $--color-text-placeholder;

/* videos
------------------------------------------------------------------------------ */
$--videos-aspect-ratio: 0.5625;
$--videos-percentage: 56.25%;
$--videos-text-color-default: $--color-text-placeholder;

$--videos-width-default: 180px;
$--videos-height-default: $--videos-width-default * $--videos-aspect-ratio;
$--videos-width-medium: 150px;
$--videos-height-medium: $--videos-width-medium * $--videos-aspect-ratio;
$--videos-width-small: 120px;
$--videos-height-small: $--videos-width-small * $--videos-aspect-ratio;
$--videos-width-fluid: 100%;

$--videos-icon-size-default: 30px;
$--videos-icon-size-medium: 24px;
$--videos-icon-size-small: 18px;

$--videos-play-width-default: 42px;
$--videos-play-height-default: 42px;
$--videos-play-width-medium: 36px;
$--videos-play-height-medium: 36px;
$--videos-play-width-small: 30px;
$--videos-play-height-small: 30px;

$--videos-play-border-width-default: 2px;
$--videos-play-border-width-medium: 2px;
$--videos-play-border-width-small: 1px;

/* color 颜色拾取组件
------------------------------------------------------------------------------ */
$--color-size-default: 40px !default;
$--color-size-medium: 36px !default;
$--color-size-small: 32px !default;
$--color-size-mini: 28px !default;

$--color-padding: $--padding-extra-small;
$--color-border-radius: $--border-radius-base;
$--color-border-color: #e6e6e6;

$--color-svpanel-width: 255px !default;
$--color-svpanel-height: 255px !default;

$--color-hslider-width: 12px !default;
$--color-hslider-height: $--color-svpanel-height;

$--color-aslider-height: 12px !default;
$--color-aslider-width: $--color-svpanel-width;

/* tabs 标签页
------------------------------------------------------------------------------ */
$--tabs-header-height: 48px !default;

/* pagination 分页
------------------------------------------------------------------------------ */
$--pagination-color-default: $--color-text-primary;
$--pagination-solid-background-color: $--background-color-base;

$--pagination-size-default: 32px !default;
$--pagination-line-height-default: $--pagination-size-default;
$--pagination-padding-default: $--padding-extra-small;
$--pagination-margin-default: $--padding-extra-small;
$--pagination-select-width-default: 120px !default;
$--pagination-input-width-default: 64px !default;

$--pagination-size-mini: 28px !default;
$--pagination-line-height-mini: $--pagination-size-mini;
$--pagination-padding-mini: $--padding-extra-small;
$--pagination-margin-mini: $--padding-extra-small / 2;
$--pagination-select-width-mini: 100px !default;
$--pagination-input-width-mini: 40px !default;

/* menu 导航菜单
------------------------------------------------------------------------------ */
$--menu-menu-min-width: 200px !default;

$--menu-padding: 20px !default;
$--menu-margin: 10px !default;

$--menu-handle-height: 56px !default;
$--menu-item-height: 50px !default;
$--meun-item-horizontal-height: 46px !default;
$--menu-item-title-height: 30px !default;

$--menu-item-title-font-size: 12px !default;

$--menu-dark-background-color: #1c2c3c !default;
$--menu-dark-child-background-color: #131f2a !default;
$--menu-dark-hover-background-color: #26394b !default;

$--menu-collapse-width: 64px !default;

/* menu 导航菜单
------------------------------------------------------------------------------ */
$--carousel-pagination-margin-left: 15% !default;
$--carousel-pagination-margin-right: 15% !default;
$--carousel-pagination-bottom: 12px !default;

$--carousel-indicator-dots-width: 8px !default;
$--carousel-indicator-dots-height: 8px !default;
$--carousel-indicator-square-width: 16px !default;
$--carousel-indicator-square-width-active: 24px !default;
$--carousel-indicator-square-height: 3px !default;

$--carousel-button-width: 36px !default;
$--carousel-button-height: 36px !default;

/* progress 进度条
------------------------------------------------------------------------------ */
$--porgress-bg-color: $--color-primary !default;
$--progress-line-height: 8px !default;
$--progress-line-radius: 200px !default;
$--progress-line-outtext-font-size: 14px !default;
$--progress-line-outtext-font-color: $--color-text-regular !default;
$--progress-line-innertext-font-size: 12px !default;
$--progress-line-innertext-font--color: $--color-white !default;
